<template>
  <el-dialog
    :model-value="addDialogVisible"
    :destroy-on-close="true"
    title="新增商户"
    width="600px"
    @close="emits('closeDialog')"
  >
    <el-form
      ref="dialogFormRef"
      :model="addDialogForm"
      :label-width="formLabelWidth"
      :rules="rules"
    >
      <el-form-item label="商户名称" prop="name">
        <el-input v-model="addDialogForm.name" />
      </el-form-item>
      <el-form-item label="商户昵称" prop="nickname">
        <el-input v-model="addDialogForm.nickname" />
      </el-form-item>
      <el-form-item label="商户ID" prop="merchant_id">
        <el-input v-model="addDialogForm.merchant_id" />
      </el-form-item>
      <el-form-item label="邮箱登录账号" prop="email">
        <el-input v-model="addDialogForm.email" />
      </el-form-item>
      <el-form-item label="初始登录密码" prop="password">
        <el-input
          v-model="addDialogForm.password"
          placeholder="请输入商户的初始登录密码，6位以上字母数字组合"
        />
      </el-form-item>
      <el-form-item label="主分类" prop="category">
        <el-input v-model="addDialogForm.category" />
      </el-form-item>
      <el-form-item label="子分类" prop="sub_category">
        <el-input v-model="addDialogForm.sub_category" />
      </el-form-item>
      <!-- <el-form-item label="收单支付通道ID" prop="channel_id">
                <el-input v-model="addDialogForm.channel_id" />
            </el-form-item>
            <el-form-item label="收单支付币种" prop="currency">
                <el-input v-model="addDialogForm.currency" />
            </el-form-item>
            <el-form-item label="收单支付回调url" prop="callback_url">
                <el-input v-model="addDialogForm.callback_url" />
            </el-form-item>
            <el-form-item label="收单支付成功通知url" prop="page_url">
                <el-input v-model="addDialogForm.page_url" />
            </el-form-item>
            <el-form-item label="收单支付失败通知url" prop="failed_url">
                <el-input v-model="addDialogForm.failed_url" />
            </el-form-item>
            <el-form-item label="收单通道费率" prop="rate">
                <el-input v-model="addDialogForm.rate" type="number" placeholder="费率0.05" />
            </el-form-item>
            <el-form-item label="收单单笔最小金额" prop="min_amount">
                <el-input v-model="addDialogForm.min_amount" type="number" placeholder="单笔最小充值金额" />
            </el-form-item>
            <el-form-item label="收单单笔最大金额" prop="max_amount">
                <el-input v-model="addDialogForm.max_amount" type="number" placeholder="单笔最大充值金额" />
            </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(addDialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
  addDialogVisible: {
    type: Boolean,
    default: false,
  },
  addDialogForm: {
    type: Object,
    default: {
      id: "",
      name: "",
      nickname: "",
      merchant_id: "",
      channel_id: "",
      currency: "",
      email: "",
      callback_url: "",
      page_url: "",
      failed_url: "",
      rate: "",
      min_amount: "",
      max_amount: "",
      password: "",
      category: "",
      sub_category: "",
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "150px";
// 校验
const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  email: [{ required: true, message: "请输入邮箱账号", trigger: "blur" }],
  // merchant_id: [{ required: true, message: "请输入商户ID", trigger: "blur" }],
  // channel_id: [{ required: true, message: "请输入支付通道ID", trigger: "blur" }],
  // callback_url: [{ required: true, message: "请输入支付回调url", trigger: "blur" }],
  // currency: [{ required: true, message: "请输入支付币种", trigger: "blur" }],
  // rate: [{ required: true, message: "请输入支付通道费率", trigger: "blur" }],
  // min_amount: [{ required: true, message: "请输入最小充值金额", trigger: "blur" }],
  // max_amount: [{ required: true, message: "请输入最大充值金额", trigger: "blur" }],
  password: [
    {
      required: true,
      message: "请输入商户的初始登录密码，6位以上字母数字组合",
      trigger: "blur",
    },
  ],
};
// 提交
const submit = (addDialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign({}, addDialogForm);
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>
